﻿// Manipulates the CSS clases of the element
define([
    'Wjs/Wjs'
],
function () {
    'use strict';

    return Wjs.defineOnce({

        type: 'CssClasses',

        internal: {

            construct: function () {

                // The classes to set in the DOM element when created
                this.classes = [];
            },

            // Events handler

            listeners: {

                onDomElementCreated: function () {

                    // Add the class(es) to the DOM element
                    if (this.classes) {

                        this.classes.forEach(function (cls) {

                            this.addClass(cls);
                        },
                        this);
                    }
                },

                onCloned: function (cloned) {

                    this.copyCssClassesTo(cloned);
                }
            }
        },

        // Adds a class. There can be multiple classes separated by space in the string
        addClass: function (cls) {
            var me = this,
                el,
                classes;

            if (!cls) {

                Wjs.log('debug', 'Null class passed to the addClass function');

                return;
            }

            if (cls.indexOf(' ') != -1) { // There are several classes being added

                cls.split(' ').forEach(function (c) {

                    me.addClass(c);
                })
            }
            else { // Single class

                if (me.isRendered()) {

                    el = me.domEl;

                    if (!el.classList.contains(cls)) {

                        el.classList.add(cls);
                    }
                    else { // Already there

                        Wjs.log('debug', 'CSS class of name: ' + cls + ' is already applied to this element');
                    }
                }
                else { // Not rendered
                    classes = me.classes;

                    if (classes.indexOf(cls) == -1) { // It is not there

                        classes.push(cls);
                    }
                    else { // Already there

                        Wjs.log('debug', 'CSS class of name: ' + cls + ' is already applied to this element');
                    }
                }
            }

            return this;
        },

        // Removes a class. There can be multiple classes separated by space in the string
        removeClass: function (cls) {
            var me = this,
                el,
                classes,
                i;
            if (cls.indexOf(' ') != -1) { // There are several classes being added

                cls.split(' ').forEach(function (c) {

                    me.removeClass(c);
                })
            }
            else {

                if (me.isRendered()) {

                    el = me.domEl;

                    if (el.classList.contains(cls)) {

                        el.classList.remove(cls);
                    }
                    else { // Not found

                        Wjs.log('debug', 'CSS class of name: ' + cls + ' was not found in this element');
                    }
                }
                else { // Not rendered
                    classes = me.classes;
                    i = classes.indexOf(cls);

                    if (i != -1) {

                        classes.splice(i, 1); // Remove it if found
                    }
                    else { // Not found

                        Wjs.log('debug', 'CSS class of name: ' + cls + ' was not found in this element');
                    }
                }
            }

            return this;
        },

        // Replaces a class. There can be multiple classes separated by space in the string
        replaceClass: function (oldClass, newClass) {

            this.removeClass(oldClass);

            this.addClass(newClass);

            return this;
        },

        // Returns the CSS classes applied to the element as a string
        getClass: function () {

            if (this.isRendered()) {

                return this.domEl.className;
            }
            else { // Not rendered

                return this.classes.join(' ');
            }
        },

        copyCssClassesTo: function (view) {

            if (this.isRendered()) {

                this.domEl.className.split(' ').forEach(function (cls) {

                    view.addClass(cls);
                });
            }
            else { // Not rendered

                this.classes.forEach(function (cls) {

                    view.addClass(cls);
                });
            }

            this.getClass()
        }
    });

});